import 'package:flutter/material.dart';

/// ReactiveNavigationScaffold
///
/// 根据屏幕宽度适配导航栏（横向｜纵向）的展示
class ReactiveNavigationScaffold extends StatelessWidget {
  const ReactiveNavigationScaffold({
    super.key,
    required this.destinations,
    required this.selectedIndex,
    required this.onDestinationSelected,
    required this.child,
  });

  final List<NavigationDestination> destinations;
  final int selectedIndex;
  final void Function(int index) onDestinationSelected;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, dimens) {
      //Tablet横向布局
      if (dimens.maxWidth >= 600) {
        return Scaffold(
          body: Row(
            children: [
              NavigationRail(
                extended: dimens.maxWidth >= 800, //横向Tab栏项目名称的显示控制
                minExtendedWidth: 180,
                destinations: destinations
                    .map((e) => NavigationRailDestination(
                  icon: e.icon,
                  label: Text(e.label),
                ))
                    .toList(),
                selectedIndex: selectedIndex,
                onDestinationSelected: onDestinationSelected,
              ),
              Expanded(child: child)
            ],
          ),
        );
      }
      //纵向布局
      else {
        return Scaffold(
          body: child,
          bottomNavigationBar: NavigationBar(
            destinations: destinations,
            selectedIndex: selectedIndex,
            onDestinationSelected: onDestinationSelected,
          ),
        );
      }
    });
  }
}


